<!-- register components -->
<view:components>
  <global-css src="./global-css.html"></global-css>
</view:components>

<div class="default-slot">
  <slot></slot>
</div>

<!-- use register components -->

<ul>
  <li>
    <global-css></global-css>
  </li>

  <li>
    <view:component src="./view-js.html"></view:component>
  </li>

  <li>
    <view:component src="./view-query.html"></view:component>
  </li>

  <li>
    <view:component src="./use-file/index.html"></view:component>
  </li>
</ul>

<div class="bottom-slot">
  <slot name="bottom"></slot>
</div>

<style scoped>
  .default-slot {
    padding: 20px;
    margin: 20px 0;
    background: orangered;
  }

  .bottom-slot {
    padding: 20px;
    margin: 20px 0;
    background: orange;
  }
</style>
